import React, {Component} from 'react';
import {
  View,
  Text,
  Alert,
  Button,
  ToastAndroid,
  TextInput,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ScrollView,
  Image,
  Linking,
} from 'react-native';
let blue = '#45BAFF';
let uid = 0;
let portraitkey = 'empty';
import Avatar from '../Avatar/index';
import {directorCount, getDirector, join} from '../../../api/index';
import {getStorage} from '../../../storage';
let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;
export default class Check extends Component {
  static defaultProps = {
    joinList: [],
    stage: 0,
  };
  constructor(props) {
    super(props);
    let jointedNum = 0;
    let joinList = [];
    try {
      jointedNum = this.props.joinList.length;
      joinList = this.props.joinList;
    } catch (e) {
      jointedNum = 0;
    }
    this.state = {
      jointedNum: jointedNum,
      allNum: this.props.allDirectorNum,
      jointed: true,
      loading: true,
      Avatars: joinList,
      refresh: true,
    };
    //alert(JSON.stringify(this.state.Avatars));
    //alert(this.props.token);
  }
  //TODO 判断是否有权限验收
  async fetchJurisdiction() {
    const role = await getDirector();
    this.setState({
      Jurisdiction: role.error_code,
    });
    //alert(this.state.Jurisdiction);
  }
  checkJointed() {
    try {
      for (let i = 0; i < this.state.Avatars.length; i++) {
        if (this.state.Avatars[i].uid === uid) {
          this.setState({jointed: false});
        }
      }
    } catch (e) {}
  }

  async getDirectorCount() {
    let result = await directorCount();

    this.setState({
      allNum: result.count,
    });
  }
  async getUid() {
    uid = await getStorage('uid');
  }
  componentDidMount() {
    this.setState({
      refresh: !this.state.refresh,
    });
    this.checkJointed();
    this.getUid();
    this.fetchJurisdiction();
    this.getDirectorCount();
  }

  join() {
    if (this.state.Jurisdiction === 0) {
      if (this.state.jointed) {
        Alert.alert('进行验收', '您只有一次机会，验收后不可撤回', [
          {text: ''},
          {text: '再想想'},
          {text: '确认验收', onPress: () => this.changeButton()},
        ]);
      }
    } else {
      alert('对不起，您无权验收。');
    }
  }
  async changeButton() {
    // formData.append('id', this.props.id);
    // formData.append('stage', 4);
    let parameter = {id: this.props.id, stage: 4};
    let result = await join(parameter);
    if (result.error_code === 0 || result.error_code === '0') {
      if (this.state.jointed) {
        this.setState({jointed: false});
      }
      this.setState({jointedNum: this.state.jointedNum + 1});
      this.state.Avatars.push({
        uid: uid,
        portraitkey: portraitkey,
      });
      let checkFunc = this.props.checkFunc;
      checkFunc();
    } else {
      // alert(result.error_code);
    }
  }
  loadAvatar() {
    //alert(this.state.Avatars.length);
    let allAvatar = [];
    let portraitKey = '';
    try {
      let length = this.state.Avatars.length;
    } catch (e) {
      this.setState({
        Avatars: [],
      });
    }
    for (let i = 0; i < this.state.Avatars.length; i++) {
      if (this.state.Avatars[i].portraitkey === '') {
        portraitKey =
          'http://mygeneword.oss-cn-shenzhen.aliyuncs.com/hgbc/headimg/hgbc_portraits:default.jpg';
      } else {
        portraitKey = this.state.Avatars[i].portraitkey;
      }
      allAvatar.push(
        <Avatar
          marginTop={heightScreen * 0.007}
          marginRight={widthScreen * 0.013}
          key={i}
          uid={this.state.Avatars[i].uid}
          pictureUrl={portraitKey}
          pressFunc={() => this.jumpToOtherInfo(this.state.Avatars[i].uid)}
        />,
      );
    }
    return allAvatar;
  }
  jumpToOtherInfo(_uid) {
    this.props.navigation.navigate('ShowOtherInfo', {
      uid: _uid,
    });
  }
  render() {
    if (this.props.stage === 0) {
      return (
        <View
          style={{
            height: heightScreen * 0.191,
            marginTop: heightScreen * 0.009,
            backgroundColor: '#FFFFFF',
          }}>
          <View
            style={{
              marginTop: 0.016 * heightScreen,
              marginLeft: widthScreen * 0.053,
              flexDirection: 'row',
            }}>
            <View style={proposalInfoPageStyle.redRect} />
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text style={proposalInfoPageStyle.title}>验收阶段</Text>
                <Text
                  style={{
                    marginTop: heightScreen * 0.0085,
                    marginLeft: widthScreen * 0.008,
                    color: '#999999',
                    fontSize: heightScreen * 0.0165,
                    //fontFamily: 'MicrosoftYaHei',
                  }}>
                  正在加载~
                </Text>
              </View>
              <View style={proposalInfoPageStyle.redLine} />
            </View>
          </View>
          <View
            style={{
              marginLeft: widthScreen * 0.048,
              flexDirection: 'row',
              width: widthScreen * 0.85,
            }}>
            <Text style={proposalInfoPageStyle.redSubtitle}>
              已验收董事(??/
            </Text>
            <Text style={proposalInfoPageStyle.graySubtitle}>??</Text>
            <Text style={proposalInfoPageStyle.redSubtitle}>)</Text>
          </View>
          <View
            style={{
              height: heightScreen * 0.098,
              marginLeft: widthScreen * 0.048,
              width: widthScreen * 0.9,
              flexDirection: 'row',
              flexWrap: 'wrap',
            }}
          />
        </View>
      );
    } else if (this.props.stage === 4) {
      return (
        <View
          style={{
            height: heightScreen * 0.266,
            marginTop: heightScreen * 0.009,
            backgroundColor: '#FFFFFF',
          }}>
          <View
            style={{
              marginTop: 0.016 * heightScreen,
              marginLeft: widthScreen * 0.053,
              flexDirection: 'row',
            }}>
            <View style={proposalInfoPageStyle.redRect} />
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text style={proposalInfoPageStyle.title}>验收阶段</Text>
                <Text style={proposalInfoPageStyle.redSubtitle2}>
                  正在进行...
                </Text>
              </View>
              <View style={proposalInfoPageStyle.redLine} />
            </View>
          </View>
          <View
            style={{
              marginLeft: widthScreen * 0.048,
              flexDirection: 'row',
              width: widthScreen * 0.85,
            }}>
            <Text style={proposalInfoPageStyle.redSubtitle}>
              已验收董事({this.state.jointedNum}/
            </Text>
            <Text style={proposalInfoPageStyle.graySubtitle}>
              {this.state.allNum}
            </Text>
            <Text style={proposalInfoPageStyle.redSubtitle}>)</Text>
          </View>
          <View
            style={{
              height: heightScreen * 0.098,
              marginLeft: widthScreen * 0.048,
              width: widthScreen * 0.9,
              flexDirection: 'row',
              flexWrap: 'wrap',
            }}>
            {this.loadAvatar()}
          </View>
          <TouchableOpacity
            onPress={() => {
              this.join();
            }}
            style={{
              marginLeft: widthScreen * 0.048,
              width: widthScreen * 0.235,
            }}>
            <View
              style={
                this.state.jointed
                  ? proposalInfoPageStyle.jointButton
                  : proposalInfoPageStyle.jointedtButton
              }>
              <Text
                style={
                  this.state.jointed
                    ? proposalInfoPageStyle.jointButtonText
                    : proposalInfoPageStyle.jointedButtonText
                }>
                {this.state.jointed ? '我要验收' : '您已验收'}
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      );
    } else if (this.props.finsh !== 1) {
      return (
        <View
          style={{
            height: heightScreen * 0.191,
            marginTop: heightScreen * 0.009,
            backgroundColor: '#FFFFFF',
          }}>
          <View
            style={{
              marginTop: 0.016 * heightScreen,
              marginLeft: widthScreen * 0.053,
              flexDirection: 'row',
            }}>
            <View style={proposalInfoPageStyle.redRect} />
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text style={proposalInfoPageStyle.title}>验收阶段</Text>
                <Text
                  style={{
                    marginTop: heightScreen * 0.0085,
                    marginLeft: widthScreen * 0.008,
                    color: '#999999',
                    fontSize: heightScreen * 0.0165,
                    //fontFamily: 'MicrosoftYaHei',
                  }}>
                  已经结束了~
                </Text>
              </View>
              <View style={proposalInfoPageStyle.redLine} />
            </View>
          </View>
          <View
            style={{
              marginLeft: widthScreen * 0.048,
              flexDirection: 'row',
              width: widthScreen * 0.85,
            }}>
            <Text style={proposalInfoPageStyle.redSubtitle}>
              已验收董事({this.state.jointedNum}/
            </Text>
            <Text style={proposalInfoPageStyle.graySubtitle}>
              {this.state.allNum}
            </Text>
            <Text style={proposalInfoPageStyle.redSubtitle}>)</Text>
          </View>
          <View
            style={{
              height: heightScreen * 0.098,
              marginLeft: widthScreen * 0.048,
              width: widthScreen * 0.9,
              flexDirection: 'row',
              flexWrap: 'wrap',
            }}>
            {this.loadAvatar()}
          </View>
        </View>
      );
    }
  }
}
const proposalInfoPageStyle = StyleSheet.create({
  avatar1: {
    marginLeft: widthScreen * 0.002,
    backgroundColor: '#CCCCCC',
    width: heightScreen * 0.038,
    height: heightScreen * 0.038,
    borderRadius: heightScreen * 0.019,
  },
  avatar2: {
    marginTop: heightScreen * 0.007,
    marginRight: widthScreen * 0.013,
    backgroundColor: '#CCCCCC',
    width: heightScreen * 0.038,
    height: heightScreen * 0.038,
    borderRadius: heightScreen * 0.019,
  },
  title: {
    marginTop: heightScreen * 0.001,
    marginBottom: heightScreen * 0.002,
    marginLeft: widthScreen * 0.012,
    fontSize: heightScreen * 0.022,
    color: '#000000',
    //fontFamily: 'MicrosoftYaHei',
    fontWeight: '400',
  },
  graySubtitle: {
    color: '#999999',
    fontSize: heightScreen * 0.0165,
    //fontFamily: 'MicrosoftYaHei',
  },
  redSubtitle: {
    color: blue,
    fontSize: heightScreen * 0.0165,
    //fontFamily: 'MicrosoftYaHei',
  },
  redSubtitle2: {
    marginTop: heightScreen * 0.0085,
    marginLeft: widthScreen * 0.008,
    color: '#66CCFF',
    fontSize: heightScreen * 0.0165,
    //fontFamily: 'MicrosoftYaHei',
  },
  redRect: {
    marginTop: heightScreen * 0.002,
    width: widthScreen * 0.02,
    height: heightScreen * 0.033,
    backgroundColor: blue,
  },
  redLine: {
    marginLeft: widthScreen * 0.011,
    height: 1,
    width: widthScreen * 0.38,
    backgroundColor: blue,
  },
  jointButton: {
    backgroundColor: blue,
    marginTop: heightScreen * 0.037,
    height: heightScreen * 0.035,
    width: widthScreen * 0.235,
    borderRadius: 0.008 * widthScreen,
    alignItems: 'center',
    justifyContent: 'center',
  },
  jointButtonText: {
    color: '#FFFFFF',
    marginBottom: heightScreen * 0.002,
    fontSize: heightScreen * 0.018,
    //fontFamily: 'MicrosoftYaHei',
  },
  jointedtButton: {
    borderWidth: 0.5,
    borderColor: blue,
    marginTop: heightScreen * 0.037,
    height: heightScreen * 0.035,
    width: widthScreen * 0.235,
    borderRadius: 0.008 * widthScreen,
    alignItems: 'center',
    justifyContent: 'center',
  },
  jointedButtonText: {
    color: blue,
    marginBottom: heightScreen * 0.002,
    fontSize: heightScreen * 0.018,
    //fontFamily: 'MicrosoftYaHei',
  },
});
